<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宿舍成员 - 青春宿舍之家</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="logo">青春宿舍</div>
<nav class="nav-menu">

    <a href="home.html">首页</a>
    <a href="members.html">宿舍成员</a>
    <a href="life.html">宿舍生活</a>
    <a href="stories.html">宿舍故事</a>
    <a href="about.html">关于我们</a>
</nav>
<button class="mobile-menu-btn">☰</button>
</header>

<section class="banner">
<h1>我们的家庭成员</h1>
</section>

<main class="main-content">
<!-- 成员介绍 -->
<section class="section">
<h2>成员列表</h2>
<div class="card-grid">
<!-- 成员卡片1 -->
<div class="card member-card">
<img src="images/c-jdd.jpg" alt="江东东">
<div class="card-content">
<h3>江东东</h3>
<p>软件技术专业</p >
<p>兴趣爱好：编程、篮球</p >
<p class="signature">"为人民服务"</p >
</div>
</div>

<!-- 成员卡片2 -->
<div class="card member-card">
<img src="images/c-cdg.jpg" alt="陈德广">
<div class="card-content">
<h3>陈德广</h3>
<p>软件技术专业</p >
<p>兴趣爱好：编程、乒乓球</p >
<p class="signature">"为人民服务"</p >
</div>
</div>

<!-- 成员卡片3 -->
<div class="card member-card">
<img src="images/c-gsj.jpg" alt="甘盛杰">
<div class="card-content">
<h3>甘盛杰</h3>
<p>软件技术专业</p >
<p>兴趣爱好：编程、篮球</p >
<p class="signature">"为人民服务"</p >
</div>
</div>

<!-- 成员卡片4 -->
<div class="card member-card">
<img src="images/c-lhd.jpg" alt="李贺第">
<div class="card-content">
<h3>李贺第</h3>
<p>软件技术专业</p >
<p>兴趣爱好：编程、摄影</p >
<p class="signature">"为人民服务"</p >
</div>
</div>

<!-- 成员卡片5 -->
<div class="card member-card">
    <img src="images/c-llc.jpg" alt="李林崇">
    <div class="card-content">
    <h3>李林崇</h3>
    <p>软件技术专业</p >
    <p>兴趣爱好：编程、篮球</p >
    <p class="signature">"为人民服务"</p >
    </div>
    </div>

<!-- 成员卡片6 -->
<div class="card member-card">
    <img src="images/c-czf.jpg" alt="陈智富">
    <div class="card-content">
    <h3>陈智富</h3>
    <p>软件技术专业</p >
    <p>兴趣爱好：编程、羽毛球</p >
    <p class="signature">"为人民服务"</p >
    </div>
    </div>
<!-- 更多成员卡片 -->
</div>
</section>

<!-- 宿舍全家福 -->
<section class="section">
    <h2>宿舍全家福</h2>
    <div class="family-photo">
        <img src="g3.jpg" alt="宿舍全家福">
        <p>这是我们宿舍的全体成员合照，记录了我们美好的青春时光！</p>
    </div>
</section>


<!-- 值日表 -->
<section class="section">
<h2>值日安排</h2>
<table class="duty-table">
<tr>
<th>星期</th>
<th>值日生</th>
<th>职责</th>
</tr>
<tr>
<td>周一</td>
<td>江东东</td>
<td>倒垃圾、拖地</td>
</tr>
<td>周二</td>
<td>陈德广</td>
<td>倒垃圾、拖地</td>
</tr>
<td>周三</td>
<td>甘盛杰</td>
<td>倒垃圾、拖地</td>
</tr>
<td>周四</td>
<td>李贺弟</td>
<td>倒垃圾、拖地</td>
</tr>
<td>周五</td>
<td>李林崇</td>
<td>倒垃圾、拖地</td>
</tr>
<td>周六</td>
<td>陈智富</td>
<td>倒垃圾、拖地</td>
</tr>
<td>周日</td>
<td>无</td>
<td>休息</td>
</tr>
<!-- 更多表格行 -->
</table>
</section>
</main>

<footer class="footer">
    <p>© 2025 青春宿舍 保留所有权利</p>
    <p>联系我们: 1008611</p>
</footer>

<script src="JavaScript.js"></script>
</body>
</html>